<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">

    <link type="text/css" rel="stylesheet" href="Smath_js.css">
    
    <style type="text/css">	
	.smath-gap{
		width:24px;
		height:20px;
	}
	</style>

    <title>Smath JS demo</title>
    
    <script type="text/javascript" language="javascript" src="smath_js/smath_js.nocache.js"></script>
	<script language="javascript">
	var smathLoaded = false;
	var currentSmathInstance;
	function smathOnAppLoaded(){
		smathLoaded = true;
	}
	function addInstance(){
		var cell = document.getElementById('root1');
		if ( cell.hasChildNodes() )
		{
			while ( cell.childNodes.length >= 1 )
			{
				cell.removeChild( cell.firstChild );       
			} 
		}
		
		var expressionInput = document.getElementById('expression');
		
		if (smathLoaded)
			currentSmathInstance = smathCreateInstance("root1", expressionInput.value);
	}
	
	
	function alertGap0Text(){
		if (currentSmathInstance != null)
			alert("Current text in gap number 0: '" + currentSmathInstance.getGapTextAt(0) + "'");
	}
	function alertGapsCount(){
		if (currentSmathInstance != null)
			alert("Current gaps count: '" + currentSmathInstance.getGapsCount() + "'");
	}
	function alertGap0Element(){
		if (currentSmathInstance != null){
			var el = currentSmathInstance.getGapElementAt(0);
			alert("Current text in gap number 0 (by element): '" + el.value + "'");
		}
	}
	function setGap0Text(){
		if (currentSmathInstance != null){
			var textToSet = document.getElementById('gap0text').value;
			currentSmathInstance.setGapTextAt(0, textToSet);
		}
	}
	</script>
  </head>

  <body>

    <!-- OPTIONAL: include this if you want history support -->
    <iframe src="javascript:''" id="__gwt_historyFrame" tabIndex='-1' style="position:absolute;width:0;height:0;border:0"></iframe>
    
    <table width="400">
    	<tr><td colspan="2"><h1>smath-js demo</h1></td></tr>
    	<tr>
        	<td>Expression:</td>
            <td><input type="text" id="expression" /><input type="button" value="add" onClick="addInstance();"/><br>
type <strong>\box</strong> to add gap to the equation</td>
        </tr>
        <tr>
            <td>
            	Tests:
			</td>
            <td>
            	<input type="button" value="gaps count" onClick="alertGapsCount();" /><br>
            	<input type="button" value="first gap text" onClick="alertGap0Text();" /><br>
                <input type="button" value="first gap element" onClick="alertGap0Element();" /><br>
                <input type="button" value="set gap text" onClick="setGap0Text();" /> - <input type="text" id="gap0text" maxlength="3" size="3" /><br>                
			</td>
        </tr>
        <tr>
        	<td>Instance:</td>
        	<td><div id="root1"></div></td>
        </tr>
    </table>


    
    
	
  </body>
</html>
